<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./assets/css/reset.css" />
		<link rel="stylesheet/less" href="./assets/css/index.less" />
		<link rel="stylesheet" href="./assets/css/animate.min.css" />
		<link rel="shortcut icon" href="./assets/images/logo.png" type="image/x-icon" />
		<title>spirit8</title>
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="header navbar navbar-inverse" id="header">
			<div class="container">
				<div class="navbar-header">
					<!-- 展开按钮 -->
					<button
						type="button"
						class="navbar-toggle collapsed"
						data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1"
						aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<!-- LOGO -->
					<a class="navbar-brand logo" href="/">spirit8</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="menu nav navbar-nav navbar-right">
						<li><a href="#banner">HOME</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#services">SERVICES</a></li>
						<li><a href="#work">portfolio</a></li>
						<li><a href="#testimonials">testimonials</a></li>
						<li><a href="#contact">CONTACT</a></li>
					</ul>
				</div>
			</div>
		</nav>

		<!-- banner背景 -->
		<div class="banner" id="banner">
			<div class="box wow bounceIn" data-wow-delay="100ms">
				<h3 class="title">wELCOME on <span>spirit8</span></h3>
				<p class="info wow rubberBand" data-wow-delay="1000ms">
					We are a digital agency with <span>years of experience</span> and with
					<span>extraordinary people</span>
				</p>
				<a class="more wow fadeIn" id="goDown" data-wow-delay="1200ms" href="#footer"><span>↓</span></a>
			</div>
		</div>

		<!-- ABOUT -->
		<div class="about" id="about">
			<div class="about-left wow fadeInUp">
				<img src="./assets/images/about-background.png" alt="" />
			</div>
			<div class="about-right">
				<div class="title wow fadeInUp">
					<p class="small">ABOUT US</p>
					<h3 class="big"><span>SOME</span> WORDS <span>ABOUT US</span></h3>
				</div>
				<div class="resume wow fadeInUp" data-wow-delay="100ms">
					<p>
						We love building and rebuilding brands through our specific skills. Using colour, fonts, and
						illustration, we brand companies in a way they will never forget.
					</p>
				</div>
				<ul class="list">
					<li class="wow fadeInUp" data-wow-delay="200ms">
						<span class="glyphicon glyphicon-record"></span>
						<span>Mission - </span>
						We deliver uniqueness and quality
					</li>
					<li class="wow fadeInUp" data-wow-delay="300ms">
						<span class="glyphicon glyphicon-record"></span>
						<span>Skills - </span>
						We deliver uniqueness and quality
					</li>
					<li class="wow fadeInUp" data-wow-delay="400ms">
						<span class="glyphicon glyphicon-record"></span>
						<span>Clients - </span>
						We deliver uniqueness and quality
					</li>
				</ul>
				<div class="box wow fadeInUp" data-wow-delay="500ms">
					<div class="icon">
						<img src="./assets/images/about-btn.png" alt="" />
					</div>
					<span class="name">Browse our work</span>
				</div>
			</div>
		</div>

		<!-- TEAM -->
		<div class="team" id="team">
			<div class="bigbox">
				<h3 class="title wow fadeInUp" data-wow-delay="100ms">Meet <span>our team</span></h3>
				<div class="four">
					<div class="item">
						<img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="100ms" alt="" />
						<div class="font">
							<h1 class="wow fadeInUp" data-wow-delay="200ms">Jason Statham</h1>
							<h4 class="wow fadeInUp" data-wow-delay="300ms">Knife designer</h4>
							<p class="wow fadeInUp" data-wow-delay="400ms">
								Do not seek to change what has come before. Seek to create that which has not.
							</p>
						</div>
					</div>
					<div class="item">
						<img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="100ms" alt="" />
						<div class="font">
							<h1 class="wow fadeInUp" data-wow-delay="200ms">Van Damme</h1>
							<h4 class="wow fadeInUp" data-wow-delay="300ms">No English</h4>
							<p class="wow fadeInUp" data-wow-delay="400ms">
								Do not seek to change what has come before. Seek to create that which has not.
							</p>
						</div>
					</div>
					<div class="item">
						<img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="100ms" alt="" />
						<div class="font">
							<h1 class="wow fadeInUp" data-wow-delay="200ms">Sylvester Stallone</h1>
							<h4 class="wow fadeInUp" data-wow-delay="300ms">Cigar Lover</h4>
							<p class="wow fadeInUp" data-wow-delay="400ms">
								Do not seek to change what has come before. Seek to create that which has not.
							</p>
						</div>
					</div>
					<div class="item">
						<img src="./assets/images/cover.png" class="wow fadeInUp" data-wow-delay="100ms" alt="" />
						<div class="font">
							<h1 class="wow fadeInUp" data-wow-delay="200ms">Jet Li</h1>
							<h4 class="wow fadeInUp" data-wow-delay="300ms">I need more money</h4>
							<p class="wow fadeInUp" data-wow-delay="400ms">
								Do not seek to change what has come before. Seek to create that which has not.
							</p>
						</div>
					</div>
				</div>
				<div class="dots wow fadeInUp" data-wow-delay="500ms">
					<div class="dot active"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

		<!-- services -->
		<div class="services" id="services">
			<div class="box">
				<h2 class="title wow fadeInUp">take a look at <span>our services</span></h2>
				<p class="wow fadeInUp" data-wow-delay="100ms">
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
					popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
					from a line in section 1.10.32.
				</p>
				<div class="list">
					<div class="item">
						<div class="froma wow fadeInUp" data-wow-delay="200ms">
							<img src="./assets/images/01.png" alt="" />
						</div>
						<div class="info">
							<h3 class="wow fadeInUp" data-wow-delay="400ms">Web design</h3>
							<p class="wow fadeInUp" data-wow-delay="500ms">
								The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
								section 1.10.32.
							</p>
						</div>
					</div>
					<div class="item">
						<div class="froma wow fadeInUp" data-wow-delay="200ms">
							<img src="./assets/images/02.png" alt="" />
						</div>
						<div class="info">
							<h3 class="wow fadeInUp" data-wow-delay="400ms">Mobile apps</h3>
							<p class="wow fadeInUp" data-wow-delay="500ms">
								The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
								section 1.10.32.
							</p>
						</div>
					</div>
					<div class="item">
						<div class="froma wow fadeInUp" data-wow-delay="200ms">
							<img src="./assets/images/03.png" alt="" />
						</div>
						<div class="info">
							<h3 class="wow fadeInUp" data-wow-delay="400ms">PHOTOGRAPHY</h3>
							<p class="wow fadeInUp" data-wow-delay="500ms">
								The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
								section 1.10.32.
							</p>
						</div>
					</div>
					<div class="item">
						<div class="froma wow fadeInUp" data-wow-delay="200ms">
							<img src="./assets/images/04.png" alt="" />
						</div>
						<div class="info">
							<h3 class="wow fadeInUp" data-wow-delay="400ms">marketing</h3>
							<p class="wow fadeInUp" data-wow-delay="500ms">
								The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
								section 1.10.32.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- CLIENTS -->
		<div class="CLIENTS" id="CLIENTS">
			<div class="box">
				<h2 class="title wow fadeInUp">SOME OF <span>OUR CLIENTS</span></h2>
				<div class="img-box wow fadeInUp" data-wow-delay="100ms">
					<img src="./assets/images/Layer 64.png" alt="" />
					<img src="./assets/images/Layer 65.png" alt="" />
					<img src="./assets/images/Layer 67.png" alt="" />
					<img src="./assets/images/Layer 68.png" alt="" />
					<img src="./assets/images/Layer 69.png" alt="" />
				</div>
				<div class="dots wow fadeInUp" data-wow-delay="200ms">
					<div class="dot active"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

		<!-- work -->
		<div class="work" id="work">
			<div class="box">
				<h2 class="title wow fadeInUp">take a look at <span>our work</span></h2>
				<p class="wow fadeInUp" data-wow-delay="100ms">
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
					popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
					from a line in section 1.10.32.
				</p>
				<div class="work-container">
					<div class="top wow fadeInUp" data-wow-delay="300ms">
						<div class="left">Filter by type</div>
						<div class="right">
							<a href="#">All</a>
							<a href="#">Web design</a>
							<a href="#">Mobile design</a>
							<a href="#">Photograpy</a>
						</div>
						<select class="select">
							<option>请选择</option>
							<option>Web design</option>
							<option>Mobile design</option>
							<option>Photograpy</option>
						</select>
					</div>
					<div class="content">
						<div class="item wow fadeInUp" data-wow-delay="400ms">
							<div class="thumb">
								<img src="./assets/images/work-img.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="500ms">
							<div class="thumb">
								<img src="./assets/images/work-img.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="600ms">
							<div class="thumb">
								<img src="./assets/images/work-img.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="700ms">
							<div class="thumb">
								<img src="./assets/images/work-img.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="800ms">
							<div class="thumb">
								<img src="./assets/images/work-img2.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="900ms">
							<div class="thumb">
								<img src="./assets/images/work-img2.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="1000ms">
							<div class="thumb">
								<img src="./assets/images/work-img2.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="1100ms">
							<div class="thumb">
								<img src="./assets/images/work-img2.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="1200ms">
							<div class="thumb">
								<img src="./assets/images/work-img3.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="1300ms">
							<div class="thumb">
								<img src="./assets/images/work-img3.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="1400ms">
							<div class="thumb">
								<img src="./assets/images/work-img3.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
						<div class="item wow fadeInUp" data-wow-delay="1500ms">
							<div class="thumb">
								<img src="./assets/images/work-img3.png" alt="" />
								<div class="slider">
									<h2>TREND AND FASHION</h2>
									<p>Website design</p>
									<div class="plus">+</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- testimonials -->
		<div class="testimonials" id="testimonials">
			<div class="box">
				<h2 class="title wow fadeInUp"><span>our clients’</span> testimonials</h2>
				<p class="wow fadeInUp" data-wow-delay="100ms">
					This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
					of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
				</p>
				<p class="wow fadeInUp" data-wow-delay="200ms">Dean Martin, CEO Acme Inc.</p>
				<div class="dots wow fadeInUp" data-wow-delay="300ms">
					<div class="dot active"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

		<!-- contact -->
		<div class="contact" id="contact">
			<div class="box">
				<h2 class="title wow fadeInUp">take a look at <span>our services</span></h2>
				<p class="wow fadeInUp" data-wow-delay="100ms">
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
					popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
					from a line in section 1.10.32.
				</p>
				<form>
					<div class="line1 wow fadeInUp" data-wow-delay="200ms">
						<div class="input-box">
							<label for="">Name <span>*</span></label>
							<input type="text" placeholder="请输入用户名称" />
						</div>
						<div class="input-box">
							<label for="">Emali address <span>*</span></label>
							<input type="text" placeholder="请输入邮箱" />
						</div>
					</div>
					<div class="line2 wow fadeInUp" data-wow-delay="300ms">
						<label for="">Message <span>*</span></label>
						<textarea name="message" placeholder="请输入内容"></textarea>
					</div>
					<div class="line3 wow fadeInUp" data-wow-delay="400ms">
						<button type="button">SEND</button>
					</div>
				</form>
			</div>
		</div>

		<!-- footer -->
		<div class="footer" id="footer">
			<div class="box">
				<div class="left wow fadeInUp">ALL RIGHTS RESERVED. COPYRIGHT © <span>2014 SPIRIT8</span></div>
				<div class="right">
					<a href="javascript:void(0)" class="wow fadeInUp" data-wow-delay="100ms">
						<img src="./assets/images/footer1.png" alt="" />
					</a>
					<a href="javascript:void(0)" class="wow fadeInUp" data-wow-delay="200ms">
						<img src="./assets/images/footer2.png" alt="" />
					</a>
					<a href="javascript:void(0)" class="wow fadeInUp" data-wow-delay="300ms">
						<img src="./assets/images/footer3.png" alt="" />
					</a>
					<a href="javascript:void(0)" class="wow fadeInUp" data-wow-delay="400ms">
						<img src="./assets/images/footer4.png" alt="" />
					</a>
					<a href="javascript:void(0)" class="wow fadeInUp" data-wow-delay="500ms">
						<img src="./assets/images/footer5.png" alt="" />
					</a>
				</div>
			</div>
		</div>

		<!-- up -->
		<div class="up">
			<a href="#banner">
				<img src="./assets/images/top.svg" alt="" />
			</a>
		</div>
	</body>
</html>

<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<!-- <script src="./assets/js/wow.min.repeat.js"></script> -->
<script src="./assets/js/index.js"></script>
<script>
	new WOW().init();

	$('.header .menu a[href], .up a[href], #goDown[href]').click(function () {
		if (
			location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
			location.hostname == this.hostname
		) {
			const target = $(this.hash);

			if (target.length > 0) {
				const targetOffset = target.offset().top;

				$('html,body').scrollTop(targetOffset);
				return false;
			}
		}
	});
</script>
